<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    #container {
      width: 750px;
      height: 291px;
      margin: 100px auto;
      background: #ccc;
      overflow: hidden;
      position: relative;
    }

    #indicators {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }

    #indicators li {
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      background: #000;
      color: #fff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }

    #indicators li.active {
      background: #f00;
    }

    #imgs img {
      display: none;
    }

    #imgs img.active {
      display: block;
    }

    #arrows span {
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      text-align: center;
      line-height: 40px;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      cursor: pointer;
    }

    #prev {
      left: 0;
    }

    #next {
      right: 0;
    }
  </style>
</head>

<body>

  <div id="container">
    <ul id="indicators">
      <li class="active" index="0">1</li>
      <li index="1">2</li>
      <li index="2">3</li>
      <li index="3">4</li>
      <li index="4">5</li>
    </ul>
    <div id="imgs">
      <img class="active" src="imgs/1.jpg" alt="">
      <img src="imgs/2.jpg" alt="">
      <img src="imgs/3.jpg" alt="">
      <img src="imgs/4.jpg" alt="">
      <img src="imgs/5.jpg" alt="">
    </div>
    <div id="arrows">
      <span id="prev">&lt;</span>
      <span id="next">&gt;</span>
    </div>
  </div>

  <script>
    let container = document.querySelector('#container');
    let indicatorsUl = document.querySelector('#indicators');
    let indicators = indicatorsUl.children;//indicatorsUl.querySelectorAll('li');
    let imgs = document.querySelectorAll('#imgs img');
    let prev = document.querySelector('#prev');
    let next = document.querySelector('#next');
    let currIndex = 0; // 用来标识当前正在显示的图片的索引

    indicatorsUl.addEventListener('click', e => {
      let target = e.target;
      if (target.tagName === 'LI') {
        let index = target.getAttribute('index');
        currIndex = index;
        changeImg(index);
      }
    }, false);

    let clickHandler = function() {
      if (this == next) {
        currIndex++;
        if (currIndex == imgs.length) {
          currIndex = 0;
        }
      } else {
        currIndex--;
        if (currIndex < 0) {
          currIndex = imgs.length - 1;
        }
      }
      changeImg(currIndex);

    };

    prev.addEventListener('click', clickHandler, false);
    next.addEventListener('click', clickHandler, false);

    /* prev.onclick = next.onclick = function () {
      if (this == next) {
        currIndex++;
        if (currIndex == imgs.length) {
          currIndex = 0;
        }
      } else {
        currIndex--;
        if (currIndex < 0) {
          currIndex = imgs.length - 1;
        }
      }
      changeImg(currIndex);
    }; */

    function changeImg(index) {
      for (let i = 0; i < indicators.length; i++) {
        indicators[i].className = '';
        imgs[i].className = '';
      }
      indicators[index].className = 'active';
      imgs[index].className = 'active';
    }

    let timer;

    function go() {
      timer = setInterval(() => {
        // next.onclick();
        // 利用call改变 clickHandler 中的 this
        clickHandler.call(next);
      }, 2000);
    }
    go();

    container.addEventListener('mouseover', () => {
      clearInterval(timer);
    }, false);
    container.addEventListener('mouseout', () => {
      go();
    }, false);

  </script>
</body>

</html>